<template>
  <div>
    <!-- 功能按钮 -->
    <el-button
      type="primary"
      v-for="i in $store.state.user.menulist[this.$route.path]"
      :key="i.id"
      @click="btn(i.code)"
      >{{ i.name }}</el-button
    >
    <!-- 搜索框 -->
    <el-row id="" style="padding: 10px 0">
      <el-col :span="6">
        <el-input v-model="title" placeholder="标题"></el-input>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-input v-model="author" placeholder="作者"></el-input>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-date-picker
          v-model="datas"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
          value-format="yyyyMMddHHmmss"
        >
        </el-date-picker>
      </el-col>
    </el-row>
    <div>
      <el-button type="primary" @click="getuserlist(1)">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <!--  {{ this.$store.state.user.menulist[this.$route.path] }} -->
    <!-- table表格 -->
    <div v-if="tableData" style="padding:20px 0;">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="300"
        @cell-click="celltable"
        :highlight-current-row="true"
      >
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="标题" prop="title"> </el-table-column>
        <el-table-column label="作者" prop="author"> </el-table-column>
        <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :background="true"
        layout="prev, pager, next"
        :total="total"
        :page-size="5"
        @current-change="pagetype"
      >
      </el-pagination>
    </div>
    <!-- 功能组件 -->

   

   <article-edit
      :type="tabletype.update"
      :fun="cleartype"
      :tname="'update'"
      :tablerow="tablerow"
    ></article-edit>

   <article-delete
      :type="tabletype.deleteArticle"
      :fun="cleartype"
      :tname="'deleteArticle'"
      :tablerow="tablerow"
    ></article-delete>
  </div>
</template>

<script>
// 引入网络请求的组价
import { http, articlelist } from "../../api/api";
// 引入添加功能的组件
import ArticleEdit from "./ArticleEdit"; // 修改文章
import ArticleDelete from "./ArticleDelete"; //删除文章
export default {
  data() {
    return {
      tableData: "", //用户列表数据
      total: Number(), //总数量
      names: "", //搜索的名字
      tabletype: {
        //功能对话框状态
        update: false, //修改文章
        deleteArticle: false, //删除文章
      },
      // 单元格选择的对象
      tablerow: "",
      // 记录当前页码
      page: 1,
      title: "", //标题
      author: "", //作者
      datas: "", //日期时间
    };
  },
  components: {
       ArticleEdit,
       ArticleDelete
  },
  mounted() {
    this.getuserlist(1);
  },
  methods: {
    // 将tabletype中的地址值变成false状态，关闭模态框
    cleartype(type) {
      this.tabletype[type] = false;
      this.getuserlist(this.page);
      this.tablerow = "";
    },
    // 选择单元格触发的事件
    celltable(row) {
      this.tablerow = row;
      console.log(row);
    },
    // 统一的功能按钮
    btn(a) {
        console.log(a);
        if (this.tablerow == "") {
          this.$message.error("请选择要操作的用户");
        } else {
          this.tabletype[a] = true;
        }
    },
    // 重置功能
    reset() {
      this.title = "";
      this.author = "";
      this.datas = "";
      this.getuserlist(1);
    },
    // 点击页码触发的事件
    pagetype(page) {
      this.page = page;
      this.getuserlist(page);
    },
    // 网络请求列表
    getuserlist(page) {
      // 开启动画
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.$http
        .get(http + articlelist, {
          params: {
            page,
            limit: 10,
            title:this.title,
            author: this.author,
            startDate:this.datas[0],
            endDate:this.datas[1],
          },
        })
        .then(
          (data) => {
           
            if (data.data.msg == "成功") {
              // 得到的用户的表格信息
              this.tableData = data.data.data.records;
              // 总数
              this.total = data.data.data.total;
                
                setTimeout(()=>{
                    loading.close();
                },1000)

            } else {
              this.$message.error(data.data.message);
            }
          },
          (err) => {
            this.$message.error(err.data.message);
          }
        );
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>